<template>
    <div class = "Bookingmanagement">
        <el-container v-loading = "loading">
            <el-container>
            <el-main>
                <div class="Boxone-wrapper" ref="text">
        <div class="title-wrapper">
          <p>预约编辑</p>
        </div>
        <ul class="time-ul">
          <li
            @click="liClick(item,index)"
            :class="{'active-li':liIndex==index}"
            class="time-li"
            v-for="(item,index) in Arr"
            :key="index"
          >{{item}}</li>
        </ul>
        <div class="appointment">
          <div class="content-wrapper">
            <div class="appointmentnumber">
              <p class="number-p">{{alreadyBooked}}</p>
              <p class="make">已预约名单</p>
              <el-button
                @click="Boole"
                slot="reference"
                :class="{'butt':alreadyBooked==0}"
                style="float:right;"
                type="primary"
              >查看名单</el-button>
            </div>
            <div class="Modifythenumber">
              <p class="number-p">{{num}}</p>
              <p class="make">可预约人数</p>
              <el-popover placement="right" trigger="click" v-model="visible">
                <el-input-number v-model="numone" placeholder="asd" :controls= false :min="0" :max="300" label="描述文字"></el-input-number>
                <el-button @click="handleChange">确认</el-button>
                <el-button slot="reference" style="float:right" type="primary">修改人数</el-button>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="dialogVisible" width="50%">
        <div class="Boxtwo-wrapper">
          <div
            class="List-wrapper"
            v-for="(itemone,indexone) in Index"
            :key="indexone"
          >
            <div class="serial-wrapper">
              <span class="serial">编号：{{itemone.baseId}}</span>
              <span class="time" v-if = "itemone.status == 'unfinished'">状态 : 未完成</span>
              <span class="time" v-if = "itemone.status == 'completed'">状态 : 已完成</span>
              <!-- <span class="time" v-if = "itemone.status == 'cancelled'">状态 : 已取消</span> -->
            </div>
            <div class="brief-wrapeer">
              <h3 class="name">预约人：{{itemone.name}}</h3>
              <span class = "phone">联系电话：{{itemone.phone}}</span>
              <span class="base">所在学校：{{itemone.schoolName}}</span>
            </div>
            <div class="appointment-time">
              <span class="appointment">预约开始时间: {{itemone.startTime}}</span>
            </div>
            <div class = "appointment-finish">
              <span class="appointment">预约结束时间: {{itemone.endTime}}</span>
            </div>
            <div class="appointment-number">
              <span class="appointment">预约名单: </span>
            </div>
            <div class = "numberBut">
              <el-button style="margin:10px 0 0 10px;" v-for="(itemtwo,indextwo) in itemone.students" :key="indextwo">{{itemtwo.name}}</el-button>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
        <el-dialog title="详情" :visible.sync="dialogTableVisibleone">
            <el-table :data="gridData">
                <el-table-column property="userId" align="center" label="ID" ></el-table-column>
                <el-table-column property="name" align="center" label="姓名" ></el-table-column>
                <el-table-column property="oname" align="center" label="学校"></el-table-column>
                <el-table-column property="className" align="center" label="班级"></el-table-column>
                <!-- <el-table-column style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" v-if = "Boole === true"  align="center" label="评论内容"> -->
                    <!-- <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                        <p> {{ scope.row.comment.content }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">内容</el-tag>
                        </div>
                        </el-popover>
                    </template>
                </el-table-column> -->
            </el-table>
            </el-dialog>
      <div class="Boxtwo-wrapper" >
        <div class="p-wrapper">
          <p style="font-size:14px;color:#999;padding:20px;">历史预约信息汇总</p>
        </div>
        <ul class="Nav-wrapper" >
          <li @click="stateClick(index)" :class="{'active-state':stateIndex==index}" v-for="(item,index) in listArr" :key="index">{{item}}</li>
        </ul>
        <div 
          class="List-wrapper"
          v-for="(itemone,indexone) in orderFromView"
          :key="indexone"
        >
          <div class="serial-wrapper">
            <span class="serial">编号：{{itemone.reservationId}}</span>
            <!-- <span class="time">{{itemone.createdAt}}</span> -->
          </div>
          <div class="brief-wrapeer">
            <h3 class="name">预约人：{{itemone.leaderName}}</h3>
            <span class = "phone" v-if = "itemone.phone">联系电话：{{itemone.phone}}</span>
            <span class="base">所在学校：{{itemone.schoolName}}</span>
          </div>
          <div class="appointment-time">
            <span class="appointment">预约开始时间: {{itemone.startTime}}</span>
          </div>
          <div class = "appointment-finish">
              <span class="appointment">预约结束时间: {{itemone.endTime}}</span>
            </div>
          <div class="appointment-number">
            <span class="appointment">预约名单</span>
              <el-button style="margin-left:20px;" @click="handleEdit(itemone)">查看</el-button>
          </div>
        </div>
      </div>
      <div class = "pagination" style="margin:15px 0;float:right">
          <el-pagination
            background
             @current-change="handleCurrentChange" 
            layout="prev, pager, next"
            :total="totalCount">
          </el-pagination>
          </div>
            </el-main>
            </el-container>
            </el-container>
    </div>
    
</template>
<script>
import steamroller from "../../commonality.js"
import transitionTime from '../../transitionTime.js';
export default {
    data(){
        return{
            totalCount:10,
            Arr: [],
            timeArr: [],
            orderFrom: [
              {
                make:'completed',
                name:'已完成'
              },
              {
                make:'unfinished',
                name: '未完成'
              }
            ],
            gridData:[],
            orderFromView: [],
            orderFromArr: [],
            orderFromData:[],
            dialogTableVisibleone:false,
            dialogVisible: false,
            liIndex: 0,
            num: 0,
            alreadyBooked: 0,
            listArr: ["未完成", "已完成"],
            stateIndex: 0,
            boxHeight: 0,
            visible:false,
            dateon:'',
            loading:false,
            numone:'0',
            reqParams: {
                baseId:JSON.parse(sessionStorage.getItem('user')).baseId,
                role: '',
                status: 'unfinished',
                page_no:1,
                per_page:'10'
            }
        }
    },
    created() {
        this.$nextTick(() => {
        this.GetDates();
        this.GoregistrationList();
        })
    },
    computed: {
      Index(){
         this.orderFromData = this.orderFromArr.filter(item => item.status !== 'cancelled')
         this.alreadyBooked = this.orderFromData.length
         return this.orderFromData
      }
    },
    methods:{
        Boole(){
        if(this.alreadyBooked == 0){
            this.dialogVisible = false
        } else {
            this.dialogVisible = true
        }
    },
    stateClick(index) {
      this.reqParams.page_no=1
      this.totalCount=10
      if(index === 0){
        this.reqParams.status = 'unfinished'
        this.history()
      } else {
        this.reqParams.status = 'completed'
        this.history()
      }
      this.stateIndex = index;
    },
    handleChange() {
      this.loading = true
        let time = {
        date:this.dateon,
        available:this.numone
        }
        if(!this.dateon){
          time.date = this.timeArr[0]
        }
       this.$api.Basemanager.intakecapacity(time,this.reqParams.baseId).then(res => {
        if(res.code === 2111){
          this.open1('失败','容纳量不得小于已预约容纳量','warning')
        } else if(res.code === 200) {
          this.open1('成功','修改成功','success')
          this.num = this.numone
        } else {
          this.open1('失败','修改失败','warning')
        }
      this.loading = false
      }).catch(err =>{
        console.log(err)
      })
      this.visible = false
    },
     open1(title,content,type) {
        this.$notify({
          title: title,
          message: content,
          type: type
        });
      },
    open2(item, content) {
      this.$message({
        message: item,
        type: content
      });
    },
    GoregistrationList() {
        this.loading = true
        let time = this.timeArr[0]
        this.Initializerequest(time)
    },
    //初始化请求
    Initializerequest(time){
       this.history()
       this.$api.Basemanager.make(time,this.reqParams.baseId).then(res => {
        this.orderFromArr = res.data.items
        this.num = res.data.capacity
        this.timetransition(this.orderFromArr)
        }).catch(err => {
        console.log(err)
        })
        this.loading = false
    },
    //历史预约数据
    history(){
      this.$api.Basemanager.message(this.reqParams).then(res => {
            this.orderFromView = res.data.rows.filter(item => item.role !== 'student')
            this.timetransition(this.orderFromView)
            if(res.data.pageCount){
                    this.totalCount = res.data.pageCount * 10
            } else {
                    this.totalCount = 10
            }
        }).catch(err => {
            console.log(err)
        })
    },
    //服务人数筛选
        handleEdit(item) {
        this.loading = true
        this.gridData = []
        this.$api.Basemanager.messageList(item.reservationId).then(res => {
            if(res.code === 200){
                if(item.role === "student"){
                    this.gridData.push(res.data.leader)
                } else if(item.role === "teacher") {
                    this.gridData = res.data.teamUsers
                }
            }
            this.dialogTableVisibleone = true
        }).catch(err => {
            console.log(err)
        })
        this.loading = false
    },
    GetDates() {
      let myDate = new Date();
      this.allWeek(myDate);
    },
    allWeek(dataTime) {
      let _this = this;
      let time = dataTime.getTime()
      //  + 1000 * 60 * 60 * 24;
      for (var i = 0; i < 7; i++) {
        var date = new Date(time + i * 24 * 3600 * 1000)
        console.log(date)
        this.timeArr.push(date.toJSON());
        let weekTime =  transitionTime(date.toJSON())
        let weekTimeone =  this. formatDateTime(date.toJSON())
        // var weekTime = this.formatDate(date);
        this.Arr.push(weekTimeone);
      }
    },
    //日期转换
     formatDateTime (date) {
        var time = new Date(Date.parse(date));
        time.setTime(time.setHours(time.getHours()));
        var Y = time.getFullYear() + '-';
        var  M = this.addZero(time.getMonth()) + '月';
        var D = this.addZero(time.getDate()) + '日';
        var h = this.addZero(time.getHours()) + ':';
        var m = this.addZero(time.getMinutes()) + ':';
        var  s = this.addZero(time.getSeconds());
        let datetime = M + D;
        return datetime
      },
      //日期补0操作
      addZero(num) {
        return num < 10 ? num : num;
      },
    liClick(item, index) {
      this.loading = true
      this.alreadyBooked = 0
      let time = this.timeArr[index]
      this.dateon =  this.timeArr[index]
      this.liIndex = index;
      this.$api.Basemanager.make(time,this.reqParams.baseId).then(res => {
        this.orderFromArr = res.data.items
        this.alreadyBooked = this.orderFromArr.length
        this.num = res.data.capacity
        this.timetransition(this.orderFromArr)
        this.loading = false
      }).catch(err => {
        console.log(err)
      }) 
    },
    //分页
    handleCurrentChange(val) {
           // 改变默认的页数
           this.reqParams.page_no=val
            this.history()
    },
    //时间转换器
    timetransition(item){
    for(let i = 0; i<item.length;i++){
              
              let time = transitionTime(item[i].startTime)
              let timeone = transitionTime(item[i].endTime)
              item[i].startTime = time
              item[i].endTime = timeone
            }
          }
        }
      }
</script>
<style scoped lang="stylus">
.Bookingmanagement {
  width: 100%;
    .Boxone-wrapper {
      padding: 20px 25px;
      box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.05);
      background: white;
      .title-wrapper {
        height: 25px;
        p {
          font-size: 14px;
          line-height: 25px;
          color: #999999;
        }
      }
      .time-ul {
        display: flex;
        text-align: center;
        justify-content: space-around;
        margin-top: 20px;

        li {
          font-size: 18px;
          border-radius: 2em;
          border: 1px solid #999999;
          padding: 5px 20px;
          box-sizing: border-box;
          transition: 0.5s;
          cursor: pointer;
        }

        .active-li {
          background: #228BFE;
          color: white;
          border: 1px solid #228bfe;
        }
      }

      .appointment {
        padding: 20px 20px;
        margin-top: 20px;
        background: rgba(247, 248, 253, 1);

        .time {
          height: 25px;

          span {
            color: #666666;
            line-height: 25px;
            float: left;
            font-size: 16px;
          }
        }

        .content-wrapper {
          display: flex;
          justify-content: space-around;
          width: 100%;

          .appointmentnumber {
            width: 100px;
            text-align: center;

            .number-p {
              font-size: 30px;
              color: #666;
            }

            .make {
              font-size: 16px;
              padding: 5px 0;
            }
            .butt{
              float: right;
              background:#999;
              border:1px solid #999;
            }
          }

          .Modifythenumber {
            width: 100px;
            text-align: center;

            .number-p {
              font-size: 30px;
              color: #228BFE;
            }

            .make {
              font-size: 16px;
              padding: 5px 0;
            }
          }
        }
      }
    }

    .Boxtwo-wrapper {
      margin-top: 20px;
      overflow: auto;
      background: white;
      box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.05);

      .Nav-wrapper {
        display: flex;
        height: 45px;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        border-top: 1px solid rgba(230, 230, 230, 1);
        li {
          background: white;
          line-height: 45px;
          flex: 1;
          text-align: center;
          font-size: 18px;
          transition: 0.5s;
        }

        .active-state {
          background: #808080;
          color: white;
        }
      }
      .List-wrapper {
        padding: 25px 25px;
        border-bottom: 1px solid rgba(230, 230, 230, 1);

        .serial-wrapper {
          height: 25px;

          .serial {
            color: #666666;
            line-height: 25px;
            font-size: 16px;
            float: left;
          }

          .time {
            line-height: 25px;
            font-size: 14px;
            float: right;
          }
        }

        .brief-wrapeer {
          margin: 20px 0;
          height: 25px;

          .name {
            line-height: 25px;
            font-size: 20px;
            float: left;
            font-weight: bold;
          }

          .phone, .base {
            float: left;
            line-height: 25px;
            color: #666666;
            font-size: 16px;
            margin-left: 70px;
          }
        }

        .appointment-time {
          height: 25px;
          margin: 20px 0;

          .appointment {
            color: #666;
            font-size: 16px;
            float: left;
            line-height: 25px;
          }
          .time {
            color: #228BFE;
            font-size: 16px;
            float: left;
            line-height: 25px;
            margin-left: 70px;
          }
        }
        .appointment-finish{
          height: 25px;
          margin: 20px 0;

          .appointment {
            color: #666;
            font-size: 16px;
            float: left;
            line-height: 25px;
          }
          .time {
            color: #228BFE;
            font-size: 16px;
            float: left;
            line-height: 25px;
            margin-left: 70px;
          }
        }
        .appointment-number {
          height: 25px;
          .appointment {
            color: #666;
            font-size: 16px;
            line-height: 25px;
          }

          .number {
            color: #228BFE;
            font-size: 16px;
            float: left;
            line-height: 25px;
            margin-left: 70px;
          }
        }
      }
    }
}
</style>

